<template>
    <div class="main">
        <el-row>
            <el-col :sm="24" :md="8">
                <div class="amount">
                    <div class="count">
                        <el-icon :size="40" color="#40C9C6">
                            <Grid />
                        </el-icon>
                        <div>
                            <div class="txt">商品数量</div>
                            <CountTo class="num" :startVal="0" :endVal="goodsNum" :duration="3000"></CountTo>
                        </div>
                    </div>
                    <div class="count">
                        <el-icon :size="40" color="#5aa3d0">
                            <ChatDotSquare />
                        </el-icon>
                        <div>
                            <div class="txt">未发货单</div>
                            <CountTo class="num" :startVal="0" :endVal="waitStockNum" :duration="3000"></CountTo>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :sm="24" :md="16">
                <div id="orderChart" />
            </el-col>
        </el-row>
        <el-row>
            <el-col :lg="10" :md="24">
                <div id="sumChart" />
            </el-col>
            <el-col :lg="14" :md="24">
                <el-row>
                    <el-col :md="12">
                        <div id="areaChart" />
                    </el-col>
                    <el-col :md="12">
                        <div id="channelChart" />
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>
<script lang="ts" setup>
import { get } from "@/utils/http";
import * as echarts from "echarts";
import { ref, onMounted, onBeforeUnmount } from "vue";
import { CountTo } from "vue3-count-to";//数字滚动插件
import { Grid, ChatDotSquare } from "@element-plus/icons-vue";//图标 

const goodsNum = ref(0); //商品数量
const waitStockNum = ref(0); //未发货单

let orderChart: echarts.ECharts | undefined = undefined;//柱状图
let sumChart: echarts.ECharts | undefined = undefined; //折线图
let areaChart: echarts.ECharts | undefined = undefined; //饼图 1
let channelChart: echarts.ECharts | undefined = undefined; //饼图 2

onMounted(() => {
    loadInfo()
})

function loadInfo() { //初始化首页数据
    get({ _gp: 'admin.dashboard', _mt: 'integral' }).then((res) => {
        console.log(res);
        let { daysOrder, channel, area, daysSum, goodsCount, waitStockCount } = res.data;
        orderChart = echarts.init(document.getElementById('orderChart') as HTMLElement);
        sumChart = echarts.init(document.getElementById('sumChart') as HTMLElement);
        areaChart = echarts.init(document.getElementById('areaChart') as HTMLElement);
        channelChart = echarts.init(document.getElementById('channelChart') as HTMLElement);

        waitStockNum.value = waitStockCount; //代发货数量
        goodsNum.value = goodsCount;//商品数量
        orderChart.setOption({ //柱状图数据
            title: { text: '七日订单' },
            legend: {
                data: ['订单数'],
                left: 'right'
            },
            xAxis: {
                type: 'category',
                data: daysOrder[0]    //日期
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '订单数',
                    type: 'bar',
                    barWidth: '30%',       //柱子大小
                    color: ['#3EA6F7'],   //柱子颜色
                    emphasis: { focus: 'series' },
                    data: daysOrder[1]    //数据
                },
            ]
        });
        sumChart.setOption({ //折线图数据
            title: {
                text: '7日成交金额',
                subtext: '订单数',
                left: 'left'
            },
            legend: {
                data: ['订单数'],
                left: 'right'
            },
            xAxis: {
                type: 'category',
                data: daysSum[0]    //日期
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '订单数',
                    type: 'line',
                    emphasis: {
                        focus: 'series'
                    },
                    data: daysSum[1]    //数据
                },
            ]
        });
        areaChart.setOption({ //饼图 1数据
            title: {
                text: '订单地区分布',
                left: 'left'
            },
            legend: {
                data: ['地区分布'],
                left: 'right',
            },
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    name: '地区分布',
                    type: 'pie',
                    radius: '50%',
                    data: area,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        });
        channelChart.setOption({ //饼图 2数据
            title: {
                text: '订单渠道分布',
                left: 'left'
            },
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: channel,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        });
        window.onresize = function () { //监听window窗口大小变化
            if (sumChart && orderChart && areaChart && channelChart) {
                sumChart.resize(); //调用echarts实例对象的resize方法 使宽度随着窗口的变化自适应
                orderChart.resize();
                areaChart.resize();
                channelChart.resize();
            }
        };
    })
}

onBeforeUnmount(()=>{
    if (orderChart) {
        orderChart.dispose();
        orderChart = undefined;   
    };
    if (sumChart) {
        sumChart.dispose();
        sumChart = undefined;   
    };
    if (areaChart) {
        areaChart.dispose();
        areaChart = undefined;   
    };
    if (channelChart) {
        channelChart.dispose();
        channelChart = undefined;   
    };
})

</script>
<style lang="less" scoped>
.main {
    margin-top: 50px;
}

.amount {
    margin: 50px auto;
    width: 65%;

    .count {
        height: 80px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        margin-top: 35px;
        box-shadow: 0px 0px 20px 0px #e3e2e2;

        .txt {
            margin-bottom: 10px;
        }

        .num {
            font-weight: bold;
            font-size: 20px;
        }
    }

}

// 柱形图
#orderChart {
    width: 95%;
    margin: auto;
    height: 400px;
}

// 折线图
#sumChart {
    width: 95%;
    height: 400px;
}

// 饼图 1
#channelChart {
    height: 400px;
}

// 饼图 2
#areaChart {
    height: 400px;
}
</style>


